<template>
  <div class="about">
    <van-overlay :show="showLoading">
      <van-loading color="#fff" size="100px" type="spinner" />
    </van-overlay>
    <div class="head-line">
      <img src="@/assets/icon/arrow-l.png" @click="logout" alt />
      <h2>陆家镇农村房屋规划建设平台</h2>
      <!-- <img src="@/assets/icon/edit.png" @click="showForm" alt /> -->
      <span></span>
    </div>
    <div class="main-content">
      <div class="user-info">
        <p>
          <span>您好，</span>
          <span>{{ obj.fullname }}</span>
        </p>
        <div class="search">
          <!-- <label>户主姓名: </label> -->
          <div class="enlarge-i">
            <input type="text" v-model="value" placeholder="请输入户主姓名"/>
            <div class="enlarge" @click="search"></div>
          </div>
          <!-- <div class="clearSearch" @click="resetSearch">清除</div> -->
        </div>
      </div>
      <div class="houseList">
        <div class="title-line">
          <span v-for="item in titleList" :key="item">{{ item }}</span>
        </div>
        <div class="house-item" v-show="houseList.length > 0" v-for="(obj,index) in houseList" :key="obj.id" :class="{gray: index%2 == 1? true: false,}" @click="getMore(obj.id)">
          <span>{{ obj.village }}</span>
          <span>{{ obj.address }}</span>
          <span>{{ obj.doorno }}</span>
          <span>{{ obj.name }}</span>
          <!-- <span @click="getMore(obj.id)">查看</span> -->
        </div>
        <div class="nodata" v-show="houseList.length == 0">
          <p>未搜索结果</p>
        </div>
        <van-pagination
          v-model="page.pageNow"
          :total-items="page.total"
          :page-count="page.totalPage"
          :item-oer-page="page.pageSize"
          :show-page-size="3"
          @change="getHouseList"
          force-ellipses
        />
      </div>
      <!-- <div class="question">
        <p>
          使用时如有疑问请联系
          <br />
          <a href="tel:17312592293">17312592293</a>
          (工作时间：正常工作日08:30-16:30)
        </p>
      </div> -->
    </div>
  </div>
</template>

<script>
import api from "@/api/api.js";
import local from "@/util/localstorage.js";
export default {
  data() {
    return {
      showLoading: true,
      titleList: ["社区", "村组", "门牌", "户主"],
      houseList: [],
      page: {
        pageNow: 1,
        // total: 1,
        pageSize: 2,
      },
      value: "",
    };
  },
  watch: {},
  computed: {
    obj() {
      return local.getLoaclStorage("userInfo");
    },
  },
  methods: {
    getHouseList() {
      // 尾缀 p 当前页码     尾缀 z和oz 分页大小
      api
        .getHouseList({
          "d-1576434-p": this.page.pageNow,
          "d-1576434-z": 10,
          "d-1576434-oz": 10,
        })
        .then((res) => {
          console.log(res.data.jsonData);
          this.showLoading = false;
          this.houseList = res.data.jsonData.list;
          // this.page.total = res.data.jsonData.total;
          this.page.totalPage =
            res.data.jsonData.total / res.data.jsonData.pageSize;
        });
    },
    getMore(id) {
      this.$router.push("/house/" + id);
    },
    search() {
      api
        .getHouseList({
          Q_name_SL: this.value,
        })
        .then((res) => {
          console.log(res.data.jsonData);
          this.houseList = res.data.jsonData.list;
          this.page.totalPage =
            res.data.jsonData.total / res.data.jsonData.pageSize;
        });
    },
    resetSearch() {
      this.value = "";
      this.getHouseList();
    },
    // 格式化时间戳     自定义返回  年月日时分秒
    formatDate(date) {
      var now = new Date(date);
      var year = now.getFullYear();
      // var year = now.getYear();     //  为啥是120
      // console.log(year);
      var month = now.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = now.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      return month + "-" + date;
    },
    // 退出登录
    logout() {
      console.log("退出登录");
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "是否退出登录",
        })
        .then(() => {
          // on confirm
          api.logout().then((res) => {
            console.log(res);
            if (res.data.success) {
              this.$router.replace("/");
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {},
  created() {
    // 控制背景色
    var bg = document.querySelector("body");
    bg.style.backgroundColor = "#f2f2f2";

    this.getHouseList();
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.about {
  // position: relative;
  // width: 100%;
  background-color: #f2f2f2;
  font-size: 14px;
  .van-loading {
    margin-top: 80%;
  }
  .head-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 42px;
    color: white;
    background-color: #109beb;
    h2 {
      padding: 0;
      font-size: 20px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
    }
    img {
      width: 20px;
      height: 20px;
    }
    span {
      display: inline-block;
      height: 30px;
      width: 20px;
      line-height: 30px;
    }
  }
  .main-content {
    .user-info {
      width: 100%;
      height: 134px;
      background: url("~@/assets/img/bg.png") no-repeat center/cover;
      overflow: hidden;
      p {
        margin: 20px auto 0;
        // margin: 20px 0 0 44px;
        width: 209px;
        font-size: 20px;
        color: #fff;
        text-align: left;
      }

      .search {
        margin: 5px 0;
        label {
          display: inline-block;
          vertical-align: top;
          margin-right: 5px;
          width: 70px;
          height: 25px;
          line-height: 25px;
          background: linear-gradient(0deg, #2e9be9 0%, #25c3f8 100%);
          border-radius: 3px;
          color: #fff;
        }
        .enlarge-i {
          display: inline-block;
          width: 209px;
          height: 24px;
          line-height: 24px;
          text-align: left;
          background-color: #e5e5e5;
          border-radius: 3px;
          border: 1px solid #2e9be9;
          input {
            display: inline-block;
            vertical-align: top;
            padding-left: 3px;
            width: 180px;
            border: none;
            background-color: #e5e5e5;
          }
          .enlarge {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-left: 1px solid rgb(185, 185, 185);
            background: #e5e5e5 url("~@/assets/icon/search.svg") no-repeat
              center/17px 17px;
          }
        }
        .clearSearch {
          display: inline-block;
          vertical-align: top;
          margin: 1px 0 0 5px;
          padding: 0 3px;
          // color: #fff;
          height: 24px;
          line-height: 24px;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }
    .houseList {
      width: 100%;
      .title-line {
        width: 100%;
        background: #e0e0e0;
        span {
          display: inline-block;
          height: 28px;
          line-height: 28px;
          &:nth-child(1) {
            width: 40%;
          }
          &:nth-child(2) {
            width: 30%;
          }
          &:nth-child(3) {
            width: 10%;
          }
          &:nth-child(4) {
            width: 20%;
          }
        }
      }
      .house-item {
        background-color: #fff;
        &.gray {
          background-color: #F2F6F8;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          height: 35px;
          line-height: 35px;
          &:nth-child(1) {
            width: 40%;
          }
          &:nth-child(2) {
            width: 30%;
          }
          &:nth-child(3) {
            width: 10%;
          }
          &:nth-child(4) {
            width: 20%;
          }
        }
      }
    }
    .nodata {
      height: 30px;
      line-height: 30px;
      background-color: #fff;
    }
    .question {
      margin-top: 10px;
      line-height: 20px;
    }
  }
}
</style>